The content class is the body of all our elements. This will house containers and columns. This class creates a left, right, and bottom margin and changes it's width on different devices to keep it responsive and beautiful.
The container class is the hosing wrapper of a specific feature, this class makes the code more easily readable and at the same time adds a margin bottom to your elements. Inside the container classes the features explained bellow will be added.
Control classes are added to specific classes to give them a second set of properties.
left-text: will make text align to the left
center-text: will make text align to the center
right-text: will make text align to the right
no-bottom: this class can be added to any element to remove the margin bottom completely. This can be used for example if you have a paragraph inside a container
half-bottom: this can be added to any element of the page, and it will use half the bottom of the main container class.
full-bottom: this can be added to any element that you wish to have a full bottom. The bottom value is determined by the container class.
responsive-image: when having an image on screen you wish to be fullly responsive and maintain aspect ratio, add the class responsive-image to it and it will automatically scale accordingly when changing resolutions.
disabled: adding this class to any element will turn that element off, by setting it's css to display none.
uppercase: adding this class will make your entire text uppercase
lowercase: adding this class will make your entire text lowercase
regular-anchor: if you don't want a link to change it's color, adding regular-anchor to it will make it take the color of it's parrent element.
hide-if-responsive: this class can be added to any element you wish to hide on tablets but show on mobiles
hide-if-mobile: this class can be added to any element you wish to hide on mobiles but show on tablets.
Responsive classes are columns and responsive columns that adapt according to resolutions. We've set the breaking point at 768px, which is the default small size of a tablet. Under 768px you risk hitting devices like Phablets and Large Phones and making them switch to tablet resolution.
Two Columns, Unresponsive Class.
Replace the "CONTENT HERE" zone with any feature you want, the code bellow will generate two columns on any resolutions. You must add last-column to the last one-half to make sure the margins are perfect.
<div class="container">
<div class="one-half">CONTENT HERE</div>
<div class="one-half last-column">CONTENT HERE</div>
</div>
Three Columns, Unresponsive Class.
Replace the "CONTENT HERE" zone with any feature you want, the code bellow will generate two columns on any resolutions. You must add last-column to the last one-third to make sure the margins are perfect.
<div class="container">
<div class="one-third">CONTENT HERE</div>
<div class="one-third">CONTENT HERE</div>
<div class="one-third last-column">CONTENT HERE</div>
</div>
Two Columns, Responsive Class.
Replace the "CONTENT HERE" zone with any feature you want, the code bellow will generate two columns, on a mobile device, they will show up as rows, so, unresponsive, but on tablets, they will show up as two columns, so, responsive.
<div class="container">
<div class="one-half-responsive">CONTENT HERE</div>
<div class="one-half-responsive last-column">CONTENT HERE</div>
</div>
Three Columns, Responsive Class.
Replace the "CONTENT HERE" zone with any feature you want, the code bellow will generate two columns, on a mobile device, they will show up as rows, so, unresponsive, but on tablets, they will show up as two columns, so, responsive.
<div class="container">
<div class="one-third-responsive">CONTENT HERE</div>
<div class="one-third-responsive">CONTENT HERE</div>
<div class="one-half-responsive last-column">CONTENT HERE</div>
</div>
Sidebar columns are basically a column that's 25% the width of the screen and a column that's 75% the width of the screen. Sidebar columns will appear as one row on mobiles and as two columns on tablets.
<div class="container">
<div class="sidebar-right-big">CONTENT HERE</div>
<div class="sidebar-left-small">CONTENT HERE</div>
</div>
<div class="container">
<div class="sidebar-left-big">CONTENT HERE</div>
<div class="sidebar-right-small">CONTENT HERE</div>
</div>
To create a responsive image, follow the structure bellow
<img src="images/img.jpg" alt="img" class="responsive-image">
To create a responsive video, follow the structure bellow
<iframe class="responsive-video" src="video_address_link"></iframe>
To create a responsive map, go to google maps, get the embed code, and paste it in the iframe example bellow!
<div class="maps-container">
<iframe class="responsive-image maps" src="https://maps.google.com/?ie=UTF8&ll=47.595131,-122.330414&spn=0.006186,0.016512&t=h&z=17&output=embed"></iframe>
</div>
Text highlights will make a certain part of the text show up using a background. These are easy to use and are applied by adding a span class to the text you want highlighted. Please check the examples bellow. The span has the main class text-highlight that sets the proper spacings and the highlight-COLOR class that changes the color. Examples of colors can be seen in the code bellow, just copy and paste them to your desired location ( container )
<p><span class="text-highlight highlight-turqoise">This is a highlight</span>and this is the text</p> <p><span class="text-highlight highlight-green">This is a highlight</span>and this is the text</p> <p><span class="text-highlight highlight-blue">This is a highlight</span>and this is the text</p> <p><span class="text-highlight highlight-magenta">This is a highlight</span>and this is the text</p> <p><span class="text-highlight highlight-dark">This is a highlight</span>and this is the text</p> <p><span class="text-highlight highlight-yellow">This is a highlight</span>and this is the text</p> <p><span class="text-highlight highlight-red">This is a highlight</span>and this is the text</p> <p><span class="text-highlight highlight-orange">This is a highlight</span>and this is the text</p>
Altough we also incorporated font-awesome http://fortawesome.github.io/Font-Awesome/icons/ in our project, we included some PNG icons as well. To generate a icon list, you must first create an unsorted list ( ul ) with the class name icon-list, then, to the list you want, add any of the following classes. ( check the example bellow )
<ul class="icon-list">
<li class="address-list">Address icon</li>
<li class="block-list">Block icon</li>
<li class="bookmark-list">Bookmark icon</li>
<li class="briefcase-list">Briefcase icon</li>
<li class="bubble-list">Bubble icon</li>
<li class="buy-list">Buy icon</li>
<li class="calendar-list">Calendar icon</li>
<li class="clipboard-list">Clipboard icon</li>
<li class="clock-list">Clock icon</li>
<li class="delete-list">Delete icon</li>
<li class="diagram-list">Diagram icon</li>
<li class="document-list">Document icon</li>
<li class="down-list">Down icon</li>
<li class="flag-list">Flag icon</li>
<li class="folder-list">Folder icon</li>
<li class="gear-list">Gear icon</li>
<li class="globe-list">Globe icon</li>
<li class="heart-list">Heart icon</li>
<li class="help-list">Help icon</li>
<li class="info-list">Info icon</li>
<li class="key-list">Key icon</li>
<li class="left-list">Left icon</li>
<li class="letter-list">Letter icon</li>
<li class="monitor-list">Monitor icon</li>
<li class="pencil-list">Pencil icon</li>
<li class="plus-list">Plus icon</li>
<li class="present-list">Present icon</li>
<li class="print-list">Print icon</li>
<li class="right-list">Right icon</li>
<li class="save-list">Save icon</li>
<li class="search-list">Search icon</li>
<li class="shield-list">Shield icon</li>
<li class="statistics-list">Statistics icon</li>
<li class="stop-list">Stop icon</li>
<li class="tick-list">Tick icon</li>
<li class="trash-list">Trash icon</li>
<li class="up-list">Up icon</li>
<li class="user-list">User icon</li>
<li class="wallet-list">Walet icon</li>
<li class="warning-list">Warning icon</li>
<li class="home-list">Home icon</li>
<li class="label-list">Label icon</li>
</ul>
Regular lists are vital, and the code for them is very simple. To create an ordered list class name your class ( ol class ) number-list, to create a regular list, name your class (ul class) normal-list.
Static notifications are just background colored boxes used to attract the attention of the viewer. To create these classes, add them to a container and use the examples bellow.
<div class="static-notification-red">
<p class="center-text uppercase">Red notification!</p>
</div>
By default, templates are responsive, but please keep in mind the reelestate of the screen you are adding the table to as you cannot add 50 columns to a 300 pixel width screen! Using tables implies the same old structure use since the begging of HTML, but just in case, we're adding the code here so you can copy and paste it to your page and edit from there on!
<table cellspacing='0' class="table">
<tr>
<th>TABLE</th>
<th class="table-title">PLUS</th>
<th class="table-title">PRO</th>
</tr>
<tr>
<td class="table-sub-title"> ONE</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr class='even'>
<td class="table-sub-title"> TWO</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td class="table-sub-title"> THREE</td>
<td>No</td>
<td>No</td>
</tr>
<tr class='even'>
<td class="table-sub-title">VALUE</td>
<td class="price">$9.<sup class="small-price">99</sup></td>
<td class="price">$109.<sup class="small-price">99</sup></td>
</tr>
</table>
Responsive tabs are simple to use.
<div class="container">
<div class="tabs">
<a href="#" class="tab-but tab-but-1 tab-active">Tab 1</a>
<a href="#" class="tab-but tab-but-2">Tab 2</a>
</div>
<div class="tab-content tab-content-1">
Tab Content
</div>
<div class="tab-content tab-content-2">
Tab Content
</div>
</div>
To add more submenu items, duplicate the anchor classes.
<div class="submenu-navigation">
<a href="#" class="submenu-nav-deploy">Deploy Submenu</a>
<div class="submenu-nav-items">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
</div>
</div>
You can choose between 3 toggles, to switch between these toggles, replace toggle-1, deploy-toggle-1 with -2 and -3. For the toggle-3, be sure to add the following code inside the anchor. <em><strong></strong></em>
<div class="container">
<div class="toggle-1">
<a href="#" class="deploy-toggle-1">This is content toggle</a>
<div class="toggle-content">
Toggle Content Here
</div>
</div>
</div>
Big notifications cna be used when a user must see a large notice and these can be closed as well. You can chose between 4 color codes red, green, yellow and blue. replace COLOR-notifcation with the color you want from the four above.
<div class="big-notification red-notification">
<h4 class="uppercase">Notification Title</h4>
<a href="#" class="close-big-notification">x</a>
<p>A lot of nice stuff you want to write in this notification! It's simple to use and awesome!</p>
</div>
Static small notifications can be dismissed with a simple tap. These work the same as the features from the typography page and can be switched between four color codes, green, blue, yellow or red. Replace static-notification-COLOR with the color you wish.
<div class="static-notification-red tap-dismiss-notification">
<p class="center-text uppercase">A red notification! Dismiss!</p>
</div>
Not much to be explained here, these are button classes, copy and paste them where you need them.
<a href="#" class="button button-red">Button</a> <a href="#" class="button button-green">Button</a> <a href="#" class="button button-blue">Button</a> <a href="#" class="button button-magenta">Button</a> <a href="#" class="button button-tea">Button</a> <a href="#" class="button button-yellow">Button</a> <a href="#" class="button button-orange">Button</a> <a href="#" class="button button-light">Button</a> <a href="#" class="button button-grey">Button</a> <a href="#" class="button button-dark">Button</a> <a href="#" class="button button-red">Button</a> <a href="#" class="button button-green">Button</a>
3D Buttons have a darker 4 pixel stroke beneeth them to give them a three dimensional effect. Just copy and paste them where you need them.
<a href="#" class="button-3d button-red red-3d">Button</a> <a href="#" class="button-3d button-green green-3d">Button</a> <a href="#" class="button-3d button-blue blue-3d">Button</a> <a href="#" class="button-3d button-magenta magenta-3d">Button</a> <a href="#" class="button-3d button-tea tea-3d">Button</a> <a href="#" class="button-3d button-yellow yellow-3d">Button</a> <a href="#" class="button-3d button-orange orange-3d">Button</a> <a href="#" class="button-3d button-light light-3d">Button</a> <a href="#" class="button-3d button-grey grey-3d">Button</a> <a href="#" class="button-3d button-dark dark-3d">Button</a> <a href="#" class="button-3d button-red red-3d">Button</a> <a href="#" class="button-3d button-green green-3d">Button</a>
The font awesome class ( http://fortawesome.github.io/Font-Awesome/icons/ 4.1.0 curent version ) allows you to import icons by simply adding the <i class="fa fa-ICON-NAME"></i> to your button. Check the link to see all icons available. Make sure you copy and paste the icon name corectly. In case you see that an icon is not displayed, it means that font-awesome has updated their classes and you need to update the font-awesome.css file.
We won't be updating our files just for font-awesome.css because it would be a logistical nightmare to update all our 60+ files for just one CSS. Updating the class is extremely simple. Open http://fortawesome.github.io/Font-Awesome/ , download the pack, extract the file, (make a backup of font-awesome.css from our styles folder then ) replace font-awesome.css in our item, with the font-awesome.css you've just downloaded! Voila! Font awsome has been updated!
In case this method does not work, revert to the old font-awesome you've just backed up and send us a message. We will fix the issue in less than 24 hours and give you a free update!
<a href="#" class="button button-red"><i class="fa fa-navicon"></i>Button</a> <a href="#" class="button button-green"><i class="fa fa-life-saver"></i>Button</a> <a href="#" class="button button-blue"><i class="fa fa-paw"></i>Button</a> <a href="#" class="button button-magenta"><i class="fa fa-camera"></i>Button</a> <a href="#" class="button button-tea"><i class="fa fa-cog"></i>Button</a> <a href="#" class="button button-yellow"><i class="fa fa-picture-o"></i>Button</a> <a href="#" class="button button-orange"><i class="fa fa-question"></i>Button</a> <a href="#" class="button button-light"><i class="fa fa-exclamation"></i>Button</a> <a href="#" class="button button-grey"><i class="fa fa-angle-right"></i>Button</a> <a href="#" class="button button-dark"><i class="fa fa-angle-left"></i>Button</a>
The following code must be added in a container.
<em class="speach-left-title">John Doe says:</em> <p class="speach-left">This is just an awesome bubble! It's quite cute isn't it?</p> <div class="clear"></div> <em class="speach-right-title">Jane Doe replied:</em> <p class="speach-right blue-bubble">Yeap! It's awesome isn't it and it's not that hard to use! And they act like bubbles, only expanding to 75% of width!</p> <div class="clear"></div>
Once you've copied the code above, replace the text you need with yours. The top code will create a left speach bubble, the bottom code will create a right speach bubble. Copy and paste as many times as many bubbles you need.
Device specific classes will apear only for the device that browse them. We've added android, ipod, ipad, and iphones to the mix, because these represent 99% of the mobile marketshare. To change the device, simply replace the main class DEVICE-detected with android, ipod, iphone, or ipad.
We've made a small design for you, but inside the DEVICE-detected class you can add whatever content you wish to display for that specific platform.
<div class="android-detected">
<div class="detected-wrapper">
<img src="images/detector/android.png" alt="img">
<h4>Get it on Google Play</h4>
<em>For your Android Device</em>
<p>
This is a demo box, included in the template, but you can detect Androids
and add whatever text or element appear for that platform only!
</p>
</div>
</div>
Inside the content class, create a class called portfolio-one, and inside it, add the following code to create a portfolio item. You can duplicate the code bellow to create more items.
<div class="portfolio-one-item full-bottom">
<div class="portfolio-one-image">
<a href="images/pictures/3.jpg" class="swipebox" title="Caption Here">
<i class="fa fa-plus"></i>
</a>
<img src="images/pictures/3.jpg" class="responsive-image">
</div>
<div class="portfolio-one-text">
<h3 class="title">Portfolio Item</h3>
<em class="subtitle">Awesome one column portfolio</em>
<div class="portfolio-one-details">
<a href="#">10 September 2055</a>
<a href="#">Mobile</a>
<a href="#">Envato Item</a>
</div>
<p class="half-bottom">
Lorem ipsum dolor sit amet, consectetur est adipiscing elit. Pellentesque lacus ex,
sollid um facilisis elementum quis, vulputate nec urna. In scelerisque tincidunt
enim, eutsmax.
</p>
<div class="portfolio-one-links">
<a href="#"><i class="fa fa-arrow-right"></i> Visit Project</a>
<a href="#">Details <i class="fa fa-link"></i></a>
</div>
</div>
</div>
Inside the content class, create a class called portfolio-two, and inside it, add the following code to create a portfolio item. You can duplicate the code bellow to create more items.
<div class="portfolio-two-item full-bottom">
<div class="portfolio-two-image">
<a href="images/pictures/3.jpg" class="swipebox" title="Caption Here">
<i class="fa fa-plus"></i>
</a>
<img src="images/pictures/3s.jpg" class="responsive-image">
</div>
<div class="portfolio-two-text">
<h3 class="title">Portfolio Item</h3>
<em class="subtitle">Portfolio items placed on multiple columns.</em>
<p class="half-bottom">
Lorem ipsum dolor sit amet, consecte tur est adipiscing elit. Lacus
sollid um facilisis eleme quis, vulputat nec.
</p>
<div class="portfolio-two-links">
<a href="#"><i class="fa fa-arrow-right"></i> Visit Project</a>
</div>
</div>
</div>
<div class="portfolio-wide">
<a href="#" class="portfolio-wide-item">
<h3>Swing near the ocean</h3>
<p>This is a wide item, just tap it to read more</p>
<div class="overlay"></div>
<img class="responsive-image" src="images/pictures/1ww.jpg" alt="img">
</a>
</div>
To make more wide items, duplicate the anchor class.
Line 3 creates the wide portfolio title.
Line 4 creates the wide portfolio text
Line 5 creates the overlay for the image
Line 6 creates the image itself.
<div class="adaptive-style">
<h4>Portfolio</h4>
<a class="adaptive-three-activate" href="#"><i class="fa fa-th"></i></a>
<a class="adaptive-two-activate" href="#"><i class="fa fa-th-large"></i></a>
<a class="adaptive-one-activate active-adaptive-style" href="#"><i class="fa fa-navicon"></i></a>
</div>
<div class="clear"></div>
<div class="decoration"></div>
<div class="portfolio-adaptive adaptive-one">
<div class="adaptive-item">
<a href="images/pictures/1.jpg" class="swipebox" title="Caption Goes Here">
<img class="responsive-image" src="images/pictures/1.jpg" alt="img">
</a>
<h4>Item One</h4>
<p>
Portfolio Text
</p>
</div>
<div class="adaptive-item">
<a href="images/pictures/2.jpg" class="swipebox" title="Caption Goes Here">
<img class="responsive-image" src="images/pictures/2.jpg" alt="img">
</a>
<h4>Item Two</h4>
<p>
Portfolio Text
</p>
</div>
<div class="adaptive-item">
<a href="images/pictures/3.jpg" class="swipebox" title="Caption Goes Here">
<img class="responsive-image" src="images/pictures/3.jpg" alt="img">
</a>
<h4>Item Three</h4>
<p>
Portfolio Text
</p>
</div>
</div>
The adaptive-style class houses the adaptive controls, to make any of them active, simply add the class active-adaptive-style.
The portfolio-adaptive class houses all the elements within it. To make an 1, 2, or 3 elements by default replace adaptive-one with adaptive-two or adaptive-three.
The adaptive-item houses an image, a h4 ( the title ) and a p ( paragraph ) the portfolio text. Replace as you need them.
<ul class="gallery round-thumb">
<li>
<a class="swipebox" href="images/pictures/1.jpg" title="An awesome gallery!">
<img src="images/pictures/1s.jpg" alt="img" />
</a>
</li>
</ul>
<div class="portfolio-wide">
<a href="images/pictures/1.jpg" class="swipebox portfolio-wide-item" titlte="caption here">
<h3>Swing near the ocean</h3>
<p>This is a wide item, just tap it to read more</p>
<div class="overlay"></div>
<img class="responsive-image" src="images/pictures/1ww.jpg" alt="img">
</a>
</div>
The wide gallery is the exact same thing as a portfolio, only, it houses the swipebox class inside the main anchor.
<div class="coverpage coverpage-bg3 coverpage-error">
<div class="coverpage-content">
<h1>404</h1>
<h4>You're on the wrong page!</h4>
<p>
We're either building this page now, and you're
here too soon, or the page doesn't exist! So
how about going back home?
</p>
<a class="coverpage-button" href="#">Homepage</a>
</div>
<div class="overlay"></div>
</div>
This code generates the 404 page. It should be outside the content. We suggest not including a footer on these pages
Line 1 creates the coverpaage, meaning, the 100% height of the page, this has the class coverpage-bg3 which is the background image. To edit and replace the background image, open framework.css and find (ctrl + f or cmd + f ) .coverpage-bg3, replace the image there with your own.
Line 3 is the main title
Line 4 is the small title
Line 5 to 9 is the 404 page text
Line 10 is the button to direct users back to a page you desire.
<div class="soon-page-wrapper">
<div class="soon-page">
<h1>Coming Soon</h1>
<h4>We're still working on this page!</h4>
<p>
We're working really hard to get this page up and running as soon as possible! We have an estimate below!
</p>
<div class="countdown"></div>
<a href="#" class="soon-button"><i class="fa fa-home"></i>Home</a>
</div>
<div class="overlay"></div>
</div>
Line 3 is the main title
line 4 is the main sub title
line 5 is the text
The div class countdown is the countdown timer, you can open custom.js and locate the countdown code, it's on the top lines. Replace the date there with yours.
Line 12 is the button to redirect users wherever you want them!
<div class="calendar-titles">
<a class="light-titles" href="#">S</a>
<a href="#">M</a>
<a href="#">T</a>
<a href="#">W</a>
<a href="#">T</a>
<a href="#">F</a>
<a class="light-titles" href="#">S</a>
</div>
<div class="decoration half-bottom"></div>
<div class="calendar-days">
<!--   adds a space for the single numbers, this way they can be centered in boxes -->
<a class="light-day" href="#"><i class="fa fa-circle"></i> 1</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i> 2</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i> 3</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i> 4</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i> 5</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i> 6</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i> 7</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i> 8</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i> 9</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>10</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>11</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>12</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>13</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i>14</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i>15</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>16</a>
<a class="taken-day" href="#"><i class="fa fa-circle"></i>17</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>18</a>
<a class="close-day" href="#"><i class="fa fa-circle"></i>19</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>20</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i>21</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i>22</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>23</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>24</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>25</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>26</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>27</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i>28</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i>29</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>30</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>31</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i> 1</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i> 2</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i> 3</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i> 4</a>
</div>
Lines 1 to 9 are the calendar days, you can rearange these as you wish. Adding light-day class to any anchor will make it look grayer, maybe signify a date that is of no importance to you or a weekenda day.
Lines 13 to 50 are the calendar days. These are created by simply adding more anchor classes.
clear-day is a day with no background circle around it.
light-day is a day that is made to look like the days of the week, a little less dark.
taken-day will create a green circle around the day
close-day will create a red circle around the day
<div class="calendar-hours">
<a href="#" class="calendar-hour calendar-hour-taken">
<strong class="cal-from">0:00 AM</strong>
<strong class="cal-to"> 9:00 AM</strong>
<h4>Closing Hours</h4>
<em><i class="fa fa-map-marker"></i>Melbourne Victoria</em>
</a>
<a href="#" class="calendar-hour calendar-hour-clear">
<strong class="cal-time">10:00 AM</strong>
<h4> </h4>
<em> </em>
</a>
<a href="#" class="calendar-hour calendar-hour-taken">
<strong class="cal-time">11:00 PM</strong>
<h4>Lunch</h4>
<em><i class="fa fa-cutlery"></i>Restaurant, Miami Beach</em>
</a>
</div>
Line 1 creates the calendar housing box.
Line 2 to 7 is the calendar event itself. This event has a cal-from and a cal-to class. These represent the time from and the time to event. You can change the title in line 5 and the icon and "location" in line 6. Hovering this will show up as red. The hover effect is determined b the calendar-hour-taken class.
Line 8 to 12 is an empty date. This callendar will have nothing on it, hence, hovering it will show up as green, determined by the calendar-hour-clear class.
Line 13 to 17 is a simple date, taking only one hour on the calendar. This has the class cal-time. This will also light up red on hover due to the same calendar-hour-taken class.
<div class="login-page bg1">
<div class="login-page-overlay"></div>
<div class="login-page-wrapper">
<a href="#" class="login-logo"></a>
<p>
Please enter your login credentials bellow.
</p>
<input type="text" class="login-username" value="username">
<input type="password" class="login-password" value="password">
<div class="one-half">
<a href="#" class="button button-green">Login</a>
</div>
<div class="one-half last-column">
<a href="pageapp-signup.html" class="button button-blue">Signup</a>
</div>
<div class="clear"></div>
<a class="forgot" href="#">Forgot Password?</a>
</div>
</div>
<div class="signup-page bg2">
<div class="signup-page-overlay"></div>
<div class="signup-page-wrapper">
<a href="#" class="signup-logo"></a>
<p>
Create an account bellow, it's really easy!
</p>
<input type="text" class="signup-email" value="Email">
<input type="text" class="signup-password" value="Password">
<div class="one-half">
<a href="#" class="button button-green full-button">Signup</a>
</div>
<div class="one-half last-column">
<a href="pageapp-login.html" class="button button-blue full-button">Login</a>
</div>
<div class="clear"></div>
<div class="or-button">
<em></em>
<strong>or</strong>
<em></em>
</div>
<div class="signup-socials">
<a href="#" class="facebook"><i class="fa fa-facebook"></i>Signup with Facebook</a>
<a href="#" class="twitter"><i class="fa fa-twitter"></i>Signup with Twitter</a>
<a href="#" class="google"><i class="fa fa-google-plus"></i>Signup with Google Plus</a>
</div>
</div>
</div>
<div class="container switch-box">
<h4>iOS Style 1</h4>
<a href="#" class="switch switch-1 switch-1-on">
<!-- Bellow the explanation there are 3 styles available for this button -->
<!-- The switch-1 class can be replaced with switch-2 or switch-3 -->
</a>
<em class="switch-box-subtitle">
Text Under The Title.
</em>
<div class="switch-box-content">
<p class="no-bottom">
Text that shows when toggling.
</p>
</div>
</div>
Line 1 openes the switchbox
Line 2 Is the title next to the switch
Line 3, 4, 5, 6, 7 is the button that changes when tapping it. There are 3 styles available.
Line 8 9 10 is the subtitle under the main tittle. This dissapears when typing the button.
Line 11 12 13 14 15 is the content for the toggle.
Line 16 closes the switchbox.
<em>I</em> <span></span> <em>0</em>
Creates the I / O toggle button.
<em><i class="fa fa-times"></i></em> <span></span> <em><i class="fa fa-check"></i></em>
Creates the X and Tick toggle button.
<span></span>
This removes the icons and just leaves the default green / red toggle button.
<span>
<em>I<br>O</em>
</span>
<span>
<em><i class="fa fa-check"></i><br><i class="fa fa-plus"></i></em>
</span>
<span></span>
This leaves the default grey green toggle button.
<strong></strong> <span></span> <em>I</em> <em>O</em>
This creates the I/O toggle button.
<strong></strong> <span></span> <em>+</em> <em>-</em>
This creates the - / + toggle button.
<strong></strong> <span></span>
This leaves the default green red toggle button.
<a href="#" class="user-list-item">
<img src="images/pictures/1s.jpg" alt="img">
<strong>User One<br></strong>
<em>United States, New York, NY </em>
<i class="fa fa-chevron-right"></i>
</a>
Line 2 holds an image
Line 3 holds the title
Line 4 holds the address
Line 5 holds the icon to the right
<p class="user-list-follow">
<img src="images/pictures/1s.jpg" alt="img">
<strong>User One<br><em>Some sample text here.</em></strong>
<a href="#" class="follow">Follow</a>
</p>
Line 2 holds the image
Line 3 is the title and the small text
Line 4 is the follow button.
<p class="user-list-socials">
<img src="images/pictures/3s.jpg" alt="img">
<strong>User Three<br><em>User is on his socials</em></strong>
<a href="#" class="icon1 twitter-color"><i class="fa fa-twitter"></i></a>
<a href="#" class="icon2 google-color"><i class="fa fa-google-plus"></i></a>
</p>
Line 2 is the image
Line 3 is the title and the text
Line 4 and 5 are the social icons. You can use maximum 2 icons to be sure these look good on mobile devices and don't skip a row.
The following code creates a notification that uses a image for the icon. Replace the second line image with an image you desire.
<p class="notification-page-item">
<img src="images/pictures/1s.jpg" alt="img">
<em>
Site outage for update. More updates soon. Tap read more for further information.
</em>
<a href="#">Read More</a>
<a href="#">15th July 2016</a>
</p>
<p class="notification-page-item">
<i class="fa fa-facebook" style="background-color:#3B5998;"></i>
<em>
We just launched a Facebook page, for news and updates, go ahead and like our page.
</em>
<a href="#">Like our Page</a>
<a href="#">15th July 2016</a>
</p>
<p class="notification-page-item">
<i class="fa fa-warning yellow-notification"></i>
<em>
Important notifications here! Just a simple class, copy and paste it and you're ready!
</em>
<a href="#">Follow on Twitter</a>
<a href="#">15th July 2016</a>
</p>
This documentation is made for the page features, but the first documentation will cover the navigation, header, changing logos and more details that are independent to each template.
That's simple. Send us a message using this form -> http://enableds.com/html-support/
If there is something wrong with the file, we'll help you, if there are features ( and by features we don't mean things like creating a new social network for you that competes with facebook ) we'll most likely add that too, and usually for free! If there is anything we can do to help, we will, plus, you got a mobile app like interface template for 10$. A 5 star rating will not hurt you, and it will only take a minute to give, but it will help us more than you can imagine! So thnak you in advance for your purchase and your rating!
Let us know if we can help you at http://enableds.com/html-support/